<template>
	<div class="single-chart-canvas">
		<Responsive class="w-full">
			<template #main="{ width }">
				<Chart
					:data="props.data"
					direction="circular"
					:config="{ controlHover: false }"
					:size="{ width, height: pieHeight }"
					:margin="calcMargin(width, pieHeight)"
				>
					<template #layers>
						<Pie
							:dataKeys="mergeDataKeys(props.config)"
							:pie-style="{ innerRadius: 40, padAngle: 0.01 }"
						/>
					</template>
					<template #widgets>
						<Tooltip :config="props.config" hideLine />
					</template>
				</Chart>
			</template>
		</Responsive>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, computed } from "vue";
import { useWindow } from "@/utils/useWindow";
import { Chart, Responsive, Pie, Tooltip } from "vue3-charts";

const props = defineProps<{
	data: any[];
	config: {
		[key: string]: {
			hide?: boolean;
			label?: string;
		};
	};
}>();

const { width: windowWidth } = useWindow();
const pieHeight = computed(() => (windowWidth.value > 768 ? 480 : 400));

function calcMargin(width: number, height: number) {
	return {
		top: 50,
		right: 0,
		bottom: 50,
		left: Math.round((width - 0.9 * height) / 2),
	};
}

function mergeDataKeys(config: typeof props.config): [string, string] {
	const keys = Object.keys(config);
	return [keys[0], keys[1]];
}
</script>
